<template>
    <div :class="classes" class="tabs-pro">
        <div :class="[prefixCls + '-bar']">
            <div :class="[prefixCls + '-nav-container']">
                <div :class="[prefixCls + '-nav-wrap']">
                    <div :class="[prefixCls + '-nav-scroll']">
                        <div :class="[prefixCls + '-nav']" ref="nav">
                            <div :class="barClasses" :style="barStyle"></div>
                            <div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)" :key="index">
                                <slot name="header" :item="item">
                                    <Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
                                    <Render v-if="item.labelType === 'function'" :render="item.label"></Render>
                                    <template v-else>{{ item.label }}</template>
                                    <Icon v-if="showClose(item)" type="ios-close-empty" @click.native.stop="handleRemove(index)"></Icon>
                                </slot>
                            </div>
                        </div>
                        <div :class="[prefixCls + '-nav-right']" v-if="showSlot">
                            <slot name="extra"></slot>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div :class="contentClasses" :style="contentStyle">
            <slot></slot>
        </div>
    </div>
</template>
<script>
import { Tabs } from "iview";
export default {
  extends: Tabs
};
</script>
<style lang="less">
.tabs-pro {
  .ivu-tabs-nav-container {
    overflow: visible;
  }
  .ivu-tabs-nav-wrap {
    overflow: visible;
  }
  .ivu-tabs-nav-scroll {
    overflow: visible;
  }
  .ivu-tabs-tab {
    position: relative;
    z-index: 1;
    .tab-drop {
      position: absolute;
      z-index: 1;
      top: 19px;
      left: 4px;
      border-left: 1px solid #e9eaec;
      border-right: 1px solid #e9eaec;
      border-bottom: 1px solid #e9eaec;
      font-size: 12px;
      min-width: 180px;
      > li {
        clear: both;
        position: relative;
        background: #ffffff;
        color: #000;
        word-break: break-all;
        padding: 0;
        height: 32px;
        border-top: 1px solid #e9eaec;
        input {
          float: left;
          border: none;
          height: 30px;
          width: 179px;
          padding: 6px;
          font-size: 12px;
        }
        > .pull-right {
          position: absolute;
          right: 8px;
        }
        button.ivu-btn {
          padding: 1px 3px;
          margin-top: 5px;
          .ivu-icon {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
